<script setup>
/**
 * @/views/home/components/VideoCard.vue
 * 小镇电话卡片组件
 */

/* 导入 */
import { useTownStore } from "@/stores";
import { ref, watch } from "vue";

/* 数据 */
const townStore = useTownStore();
const townTelephones = ref(["空", "空", "空"]);
const telephoneNames = ["小镇旅游咨询", "旅游发展委员会", "国家旅游服务热线"];

/* 侦听 */
watch(
  () => townStore.currentTown,
  (newTown) => {
    if (newTown) {
      townTelephones.value[0] = newTown.tel1 || "空";
      townTelephones.value[1] = newTown.tel2 || "空";
      townTelephones.value[2] = newTown.tel3 || "空";
    }
  },
  { immediate: true }, // 这里的 immediate: true 确保在初次加载时也能触发
);
</script>

<template>
  <div class="telephone">
    <el-card style="width: 20vw">
      <template #header>
        <div class="card-header">
          <span>小镇电话</span>
        </div>
      </template>
      <div
        v-for="(telephone, index) in townTelephones"
        :key="index"
        class="telephone-item"
      >
        <p class="telephone">{{ telephoneNames[index] }}: {{ telephone }}</p>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.telephone-item {
  width: 100%;
  border-bottom: 1px solid #e0e0e0;
  padding: 10px 0; /* 为每项增加上下内边距 */
}
.telephone {
  width: 100%;
  font-size: 18px;
  font-weight: normal;
  margin: 0;
}
</style>
